<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部工具栏 -->
        <el-form label-width="80px" size="small" ref="headForm" :model="headForm">
          <el-row>
            <el-col :span="6">
              <el-form-item label="关键字" prop="keyword">
                <el-input
                  placeholder="根据文章标题搜索"
                  style="width: 150px;"
                  v-model="headForm.keyword">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态">
                <el-select
                  style="margin-right: 10px;"
                  v-model="headForm.state"
                  clearable>
                  <el-option
                    v-for="item in status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-button @click="handleReset">清除</el-button>
                <el-button type="primary">搜索</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="text-align: right">
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  @click="showDialog()">
                新增技巧
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- alert警告框 -->
        <el-alert
          type="info"
          :title="alertInfo"
          :closable="false"
          style="margin-bottom: 15px;"
          show-icon
        >
        </el-alert>
        <!-- table表格 -->
        <el-table
          :data="articlesList"
          style="width: 100%;"
            :header-cell-style="{
              'background-color': '#fafafa',
              'border-bottom': '2px e8e8e8 solid'
            }"
        >
          <el-table-column width="80px" prop="id" label="序号" type="index" :index="indexFn">
          </el-table-column>

          <el-table-column width="400px" prop="title" label="文章标题">
            <template #default="{row}">
              {{row.title}}
              <a @click.prevent="openVideo(row.videoURL)" v-if="row.videoURL" class="el-icon-film" href="#"></a>
            </template>
          </el-table-column>

          <el-table-column min-width="0" prop="visits" label="阅读数">
          </el-table-column>

          <el-table-column min-width="0" prop="username" label="录入人">
          </el-table-column>

          <el-table-column min-width="0" prop="createTime" label="录入时间">
          </el-table-column>

          <el-table-column min-width="0" prop="state" label="状态">
            <template #default="{row}">
              <span v-if="row.state === 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>

          <el-table-column width="180px" label="操作">
            <template #default="{row}">
              <el-button type="text" @click="showPreDialog(row)">预览</el-button>
              <el-button type="text" @click="handleChangeState(row)">
                <span v-if="row.state === 0">启用</span>
                <span v-else>禁用</span>
              </el-button>
              <el-button
                type="text"
                :disabled="row.state === 1"
                @click="showDialog(row)">
              修改
              </el-button>
              <el-button
                type="text"
                :disabled="row.state === 1 || row.totals > 0"
                @click="handleRemove(row)">
              删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagForm.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagForm.pagesize"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
          style="margin-top: 20px; text-align: right;">
        </el-pagination>
      </el-card>
      <!-- 添加/修改 文章对话框 -->
      <articles-add
        ref="articlesAdd"
        :data="currentArticle"
        @updateList="updateList">
      </articles-add>
      <!-- 视频弹窗 -->
      <div class="video-preview" v-if="videoURL">
        <div class="close" @click="closeVideo()"><span class="el-icon-close"></span></div>
        <div class="box">
          <video ref="video" :src="videoURL"></video>
        </div>
      </div>
      <!-- 预览对话框 -->
      <articles-preview ref="articlesPreview" :data="currentArticle"></articles-preview>
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
import { list, changeState, remove } from '@/api/hmmm/articles'
import ArticlesAdd from '../components/articles-add.vue'
import ArticlesPreview from '../components/articles-preview.vue'

export default {
  name: 'articlesList',
  components: {
    ArticlesAdd,
    ArticlesPreview
  },
  data () {
    return {
      // 1. 工具栏数据
      headForm: {
        keyword: '',
        state: null
      },
      // 2. 分页器数据
      pagForm: {
        // 2.1. 当前页
        page: 1,
        // 2.2. 每页条数
        pagesize: 10
      },
      // 3. 文章列表
      articlesList: [],
      // 4. 总条数
      total: 0,
      // 5. 视频地址
      videoURL: '',
      // 6. 当前预览文章
      currentArticle: {}
    }
  },
  created () {
    this.getArticlesList()
  },
  computed: {
    // 1. 警告框提示信息
    alertInfo () {
      return `数据一共 ${this.total} 条`
    },
    // 2. 文章状态
    status () {
      return status
    }
  },
  methods: {
    // 1. 获取文章列表
    async getArticlesList () {
      const { data } = await list(this.pagForm)
      // console.log(data)
      this.articlesList = data.items
      this.total = data.counts
    },
    // 2. 当前页发生变化时调用
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.pagForm.page = val
      this.getArticlesList()
    },
    // 3. 当前页条数发生变化时调用
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagForm.pagesize = val
      this.pagForm.page = 1
      this.getArticlesList()
    },
    // 4. 处理表格序号
    indexFn (index) {
      return index + 1 + this.pagForm.pagesize * (this.pagForm.page - 1)
    },
    // 5. 清除工具栏表单数据
    handleReset () {
      this.$refs.headForm.resetFields()
      this.headForm.state = null
    },
    // 6. 处理启用/禁用的改变
    handleChangeState (row) {
      this.change(row)
    },
    async change (row) {
      const data = {
        id: row.id,
        state: Number(!row.state)
      }
      // console.log(data)
      await changeState(data)
        .then(response => {
          this.getArticlesList(this.pagForm)
          this.$message.success('操作成功!')
        })
        .catch(response => {
          this.$message.error(status + '操作失败!')
        })
    },
    // 7. 显示 添加/修改 对话框
    showDialog (article = {}) {
      this.currentArticle = article
      this.$nextTick(() => {
        this.$refs.articlesAdd.openDialog()
      })
    },
    // 8. 打开视频
    openVideo (url) {
      this.videoURL = url
      this.$nextTick(() => {
        this.$refs.video.play()
      })
    },
    // 9. 关闭视频
    closeVideo () {
      this.$refs.video.pause()
      this.videoURL = null
    },
    // 10. 打开预览对话框
    showPreDialog (article) {
      this.currentArticle = article
      this.$nextTick(() => {
        this.$refs.articlesPreview.openDialog()
      })
    },
    // 11. 添加/修改 后更新文章列表
    updateList () {
      if (!this.currentArticle.id) {
        this.page = 1
      }
      this.getArticlesList()
    },
    // 12. 删除文章
    handleRemove (article) {
      // 12.1 提示用户
      this.$confirm('此操作将永久删除该文章,是否继续?', '温馨提示', { type: 'warning' }).then(async () => {
        // 12.2 发送请求
        await remove(article)
        // 12.3 提示用户
        this.$message.success('操作成功')
        // 12.4 重新获取列表
        this.getArticlesList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  .app-container {
    margin: 10px 0;
    padding: 0 10px;
    .el-icon-film {
      color: blue;
      font-size: 18px;
    }
  }
  ::v-deep .el-pagination {
    text-align: center;
    vertical-align: center;
  }
  .video-preview{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    overflow: hidden;
    z-index: 9999;
    .close{
      width: 50px;
      height: 50px;
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translate(-50%,0);
      background: rgba(0,0,0,0.4);
      box-shadow: 0 0 5px rgba(0,0,0,0.4);
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-size: 20px;
    }
    .box{
      width: 800px;
      height: 600px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      video{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
